console.log('nav.js执行');
define(["jquery"], function ($) {

    function download() {
        $.ajax({
            type: 'get',
            url: '../data/nav.json',
            success: function (result) {
                var bannerArr = result.banner;
                var imgDom = '';
                var node = '';
                for (var i = 0; i < bannerArr.length; i++) {
                    imgDom += `
                    <img src="${bannerArr[i].url}" alt="" />
                    `;
                    node += `<li></li>`
                }
                $(node).appendTo('.circle');
                $('.circle li:first').addClass('active');
                $(imgDom).appendTo('.content');
            },
            error: function (msg) {
                console.log(msg);
            }
        })
        asideNav();
    }
    // 实现轮播效果
    function banner() {
        let iNow = 0; //当前显示的图片的下标
        let aImgs = null; //记录图片
        let aBots = null; //记录小圆圈
        var timer = setInterval(function () {
            iNow++;
            tab();
        }, 2500)

        function tab() {

            if (!aImgs) {
                aImgs = $('.content ').find('img');
            }
            if (!aBots) {
                aBots = $('.circle ').find('li');
            }
            if (iNow >= aImgs.length) {
                iNow = 0;
            }
            // 图片切换
            aImgs.hide().css('opacity', 0.2).eq(iNow).show().animate({
                opacity: 1
            }, 1500)
            // 小圆圈切换
            aBots.removeClass('active').eq(iNow).addClass('active');
        }
        //控制鼠标移入移除动画
        $('.content').mouseenter(function () {
            clearInterval(timer);
        });
        $('.content').mouseleave(function () {
            timer = setInterval(function () {
                iNow++;
                tab();
            }, 2500)
        })

        // 点击小圆圈
        $('.content').on('click', '.circle li', function () {
            console.log(111);
            iNow = $(this).index();
            tab();
            return false;
        })

        // 点击前后按钮进行轮播
        $('.next,.prev').click(function () {
            clearInterval(timer);
            if (this.className == 'prev') {
                iNow--;
                if (iNow == -1) {
                    iNow = $('.content ').find('img').length - 1;
                }
            } else {
                iNow++;
            }
            tab();
        })

    }

    //实现侧导航栏的数据请求
    async function asideNav() {
        await $.ajax({
            url: "../data/nav.json",
            success: function (data) {
                //第二部分，实现侧边导航栏
                var sideArr = data.sideNav;
                // console.log(sideArr);
                for (var i = 0; i < sideArr.length; i++) {
                    $('.navlist dl').each(function (item, index) {
                        if ($(this).index() == i) {
                            $(`
                        <dd>
                        <ul class="one fl">
                            <li>
                                <a href="list.html">
                                    <img src="${sideArr[i].child.firstchild[0].img}" alt="">${sideArr[i].child.firstchild[0].title}
                                </a>
                            </li>
                            <li>
                                <a href="javascript:;">
                                <img src="${sideArr[i].child.firstchild[1].img}" alt="">${sideArr[i].child.firstchild[1].title}
                                </a>
                            </li>
                            <li>
                                <a href="javascript:;">
                                <img src="${sideArr[i].child.firstchild[2].img}" alt="">${sideArr[i].child.firstchild[2].title}
                                </a>
                            </li>
                            <li>
                                <a href="javascript:;">
                                <img src="${sideArr[i].child.firstchild[3].img}" alt="">${sideArr[i].child.firstchild[3].title}
                                </a>
                            </li>
                            <li>
                                <a href="javascript:;">
                                <img src="${sideArr[i].child.firstchild[4].img}" alt="">${sideArr[i].child.firstchild[4].title}
                                </a>
                            </li>
                            <li>
                                <a href="javascript:;">
                                <img src="${sideArr[i].child.firstchild[5].img}" alt="">${sideArr[i].child.firstchild[5].title}
                                </a>
                            </li>
                            <li>
                                <a href="javascript:;">
                                <img src="${sideArr[i].child.firstchild[6].img}" alt="">${sideArr[i].child.firstchild[6].title}
                                </a>
                            </li>
                            <li>
                                <a href="javascript:;">
                                <img src="${sideArr[i].child.firstchild[7].img}" alt="">${sideArr[i].child.firstchild[7].title}
                                </a>
                            </li>
                        </ul>
                        <ul class="two fl">
                            <li>
                                <a href="javascript">
                                    <img src="${sideArr[i].child.secondChild[0].img}" alt="">
                                    <span>${sideArr[i].child.secondChild[0].title}</span>
                                    <span>${sideArr[i].child.secondChild[0].price}</span>
                                </a>
                            </li>
                            <li>
                                <a href="javascript">
                                <img src="${sideArr[i].child.secondChild[1].img}" alt="">
                                <span>${sideArr[i].child.secondChild[1].title}</span>
                                <span>${sideArr[i].child.secondChild[1].price}</span>
                                </a>
                            </li>
                            <li>
                                <a href="javascript">
                                <img src="${sideArr[i].child.secondChild[2].img}" alt="">
                                <span>${sideArr[i].child.secondChild[2].title}</span>
                                <span>${sideArr[i].child.secondChild[2].price}</span>
                                </a>
                            </li>
                            <li>
                                <a href="javascript">
                                <img src="${sideArr[i].child.secondChild[3].img}" alt="">
                                <span>${sideArr[i].child.secondChild[3].title}</span>
                                <span>${sideArr[i].child.secondChild[3].price}</span>
                                </a>
                            </li>
                        </ul>
                        <ul class="thr fl">
                            <li>
                                <a href="javascript">
                                    <img src="${sideArr[i].child.thirdChild[0].img}" alt="">
                                    <p class="name">${sideArr[i].child.thirdChild[0].name}</p>
                                    <p class="tip">${sideArr[i].child.thirdChild[0].tip}</p>
                                </a>
                            </li>
                            <li>
                            <a href="javascript">
                            <img src="${sideArr[i].child.thirdChild[1].img}" alt="">
                            <p class="name">${sideArr[i].child.thirdChild[1].name}</p>
                            <p class="tip">${sideArr[i].child.thirdChild[1].tip}</p>
                        </a>
                            </li>

                        </ul>
                    </dd>
                        
                        `).appendTo($(this))
                        }
                    })
                    // node.appendTo("#J_navCategory #J_categoryList");

                    //取出其中的子节点
                    // var childArr = sideArr[i].child;
                    // var col = Math.ceil(childArr.length / 6);
                    // node.find("div.children").addClass("children-col-" + col);
                    // for (var j = 0; j < childArr.length; j++) {
                    //     if (j % 6 == 0) {
                    //         var newUl = $(`<ul class="children-list children-list-col children-list-col-${parseInt(j / 6)}"></ul>`);
                    //         newUl.appendTo(node.find("div.children"));
                    //     }
                    //     $(`<li>
                    //             <a href="http://www.mi.com/redminote8pro" data-log_code="31pchomeother001000#t=normal&amp;act=other&amp;page=home&amp;page_id=10530&amp;bid=3476792.2" class="link clearfix" data-stat-id="d678e8386e9cb0fb" onclick="_msq.push(['trackEvent', '81190ccc4d52f577-d678e8386e9cb0fb', 'http://www.mi.com/redminote8pro', 'pcpid', '31pchomeother001000#t=normal&amp;act=other&amp;page=home&amp;page_id=10530&amp;bid=3476792.2']);">
                    //                 <img src="${childArr[j].img}" width="40" height="40" alt="" class="thumb">
                    //                 <span class="text">${childArr[j].title}</span>
                    //             </a>
                    //         </li>`).appendTo(newUl);
                    // }
                }
            }
        });
        console.log($('.ban-con'));
        console.log($('.ban-con dl'));
    }

    function move() {
        console.log(111);
        $('.ban-con').on('mouseenter', '.navlist dl', function () {
            $(this).find('dd').css('display', 'block');
        })
        $('.ban-con').on('mouseleave', '.navlist dl', function () {
            $(this).find('dd').css('display', 'none');
        })
        $('.search').mouseenter(function () {
            $('.shou').css('display', 'none');
            $('.sea').css('display', 'block')
        });
        $('.sea').mouseleave(function () {
            $('.shou').css('display', 'block');
            $('.sea').css('display', 'none')
        });

        $('.scrollTop').click(function () {
            $(window).scrollTop(0);
        });
        $('.pic').mouseenter(function () {
            console.log(555);
            $('.weChat').css('display', 'block');
        }).mouseleave(function () {
            $('.weChat').css('display', 'none');
        })
    }
    return {
        download: download,
        banner: banner,
        asideNav: asideNav,
        move: move
    }
});